<template>
	<view :style="{'margin-top':componentData.data.marginTop*2 + 'rpx',
		  'margin-bottom':componentData.data.marginBottom*2 + 'rpx',
		 'padding': '0 '+componentData.data.marginLeftRight*2 +'rpx'
		 }">
		<view :style="{
			'background-color':componentData.data.barBgColor,
			'padding':componentData.data.paddingTopBottom*2+'rpx'+' '+componentData.data.paddingLeftRight*2+'rpx'
		}">
			<div style="flex:1">
				<div :style="{
			  'display':'flex',
		  }">
					<div :style="{
	              'color':componentData.data.fontColor,
	              'display':'flex',
				  'align-items':'center',
				  'margin-right':'10px'
	          }">
						<i @click="goStoreAddress" style="width:20px;height: 25px;font-size: 20px;margin:  0px 2px 0px 0px"
							class="home-map-icon iconfont icon-dingwei"></i>
						<div style="font-size: 15px;display: flex;" @click="toStoreLocation()">
							<p style="max-width:200rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{{storeName}}</p>

							<i class="iconfont icon-arrow-down-s-fill"></i>
						</div>
					</div>
					<view class="input-box" @tap="toPage()" :style="{
				'color':componentData.data.inputColor,
				'background-color':componentData.data.inputBgColor,
				'border-radius':componentData.data.borderRadius*2+'rpx',
				'justify-content':componentData.data.justify,
				'height':componentData.data.height*2+'rpx'
			}">
						<text class="iconfont icon-iconfontsousuo"></text>
						<view class="placeholder" bindtap="toSeek" :data-place="componentData.data.title">
							{{componentData.data.title}}
						</view>
					</view>
					<div class="home-scan-box" style="display: flex;align-items: center;">
						<i :style="{
		          'color':componentData.data.fontColor
		        }" @click="scavenging()" class="iconfont icon-un-scan-o"></i>
						<i :style="{
		          'color':componentData.data.fontColor
		        }" class="iconfont icon-erweima" @click="toCard()"></i>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		watch: {
			componentData(e) {
				this.storeName = this.$root.storeName; // 重新赋值一下
			}
		},
		props: {
			componentData: {
				type: Object
			}
		},
		data() {
			return {
				"storeName": ""
			}
		},
		created() {
			this.storeName = this.$root.storeName;
		},
		methods: {
			// 跳转门店选择页面
			toStoreLocation() {
				uni.navigateTo({
					url: '/pages/index/storeLocation/storeLocation'
				})
			},
			//会员卡页面
			toCard() {
				uni.navigateTo({
					url: '/pages/mine/card/card?type=1'
				})
			},
			getSku:function(data){
				return this.$emit("getSku",data);
			},
			toAddToCar:function(data){
				return this.$emit("toAddToCar",data);
			},
			//扫条形码
			scavenging() {
				let that = this;
				uni.scanCode({
					success: async (res) => {
						if (res.errMsg != 'scanCode:ok') return;
						const response = await this.$request('SmallProgramApi/Goods/scavenging_v1', {
							goods_code: res.result
						})
						if (response.status == 1) {
							const goods = response.goods;
							//存在多规格
							if (goods.attribute_state == 2) {
								that.$emit("getSku",goods);
								//不存在多规格，直接入购物车。
							} else {
								that.$emit("toAddToCar",{
									goods_id: goods.goods_id,
									num: 1,
									store_id: that.$root.store_id
								});
							}
						} else {
							uni.showToast({
								'title': response.msg,
								'icon': 'none'
							});
						}
					}
				})
			},
			goStoreAddress: function() {
				uni.openLocation({
					longitude: Number(this.$root.storeList[0].longitude),
					latitude: Number(this.$root.storeList[0].latitude),
					name: this.$root.storeList[0].store_name,
					address: this.$root.storeList[0].address
				});
			},
			toPage() {
				uni.navigateTo({
					url: '/pages/product/productList/productList?type=1'
				});
			},
			callback(e) {
				const myEventDetail = {
					...e.detail
				};
				// console.log('diy-img-callback',e,myEventDetail);
				this.triggerEvent("callback", myEventDetail)
			}
		}
	}
</script>
<style>
	@import "diy-bar.css"
</style>
